<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; utf-8" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>注册页面</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      #head {
        height: 120px;
        width: 100px;
        text-align: center;
        position: relative;
      }
      #wrap .logGet {
        height: 850px;
        width: 368px;
        position: absolute;
        background-color: #FFFFFF;
        top: 20%;
        right: 15%;
      }
      .logC a button {
        width: 100%;
        height: 45px;
        background-color: #ee7700;
        border: none;
        color: white;
        font-size: 18px;
      }
      .logGet .logD.logDtip .p1 {
        display: inline-block;
        font-size: 28px;
        margin-top: 30px;
        width: 86%;
      }
      #wrap .logGet .logD.logDtip {
        width: 86%;
        border-bottom: 1px solid #ee7700;
        margin-bottom: 60px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
      }
      .logGet .lgD img {
        position: absolute;
        top: 12px;
        left: 8px;
      }
      .logGet .lgD input {
        width: 100%;
        height: 42px;
        text-indent: 2.5rem;
      }
      #wrap .logGet .lgD {
        width: 86%;
        position: relative;
        margin-bottom: 30px;
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
      }
      #wrap .logGet .logC {
        width: 86%;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
      }
      .error {
        color: darkred;
      }
      .repeat {
        color: #00ee00;
      }
    </style>
    <script type="text/javascript">
      function ReloadCode(){
        var time=new Date();
        document.getElementById("imagecode").src="<%=request.getContextPath()%>/RandomCodeServlet?d="+time;
      }

      window.onload = function () {
        //绑定onsubmit事件
        document.getElementById("form").onsubmit = function () {
          return checkUsername() && checkPassword()  && checkTelphone();
        }
        //给用户名和密码框、手机号分别绑定离焦事件
        document.getElementById("username").onblur = checkUsername;
        document.getElementById("password").onblur = checkPassword;
        document.getElementById("password2").onblur = checkPassword;
        document.getElementById("phonenumber").onblur = checkTelphone;
      }

      //校验用户名
      function checkUsername() {
        //获取用户名的值
        var username = document.getElementById("username").value;
        //定义正则表达式
          var reg_username = /^\d{10}$/;
        //判断值是否符合正则表达式的规则
        var flag = reg_username.test(username);
        //提示信息
        var s_username = document.getElementById("s_username");
        if (flag) {
          //提示绿色对勾
          s_username.innerHTML = "用户名格式正确";
        } else {
          //提示红色错误信息
          s_username.innerHTML = "用户名格式有误！";
        }
        return flag;
      }

      //校验密码
      function checkPassword(){
        //1.获取密码的值
        var password = document.getElementById("password").value;
        //2.定义正则表达式
        var reg_password = /^\w{6,12}$/;
        //3.判断值是否符合正则的规则
        var flag = reg_password.test(password);
        //4.提示信息
        var s_password = document.getElementById("s_password");
        if(flag == false){
          s_password.innerHTML = "密码格式有误";
        }
        var password2 = document.getElementById("password2").value;
        var s_password2 = document.getElementById("s_password2");
        if(password == password2){
          s_password2.innerHTML = "两次密码输入一致";
          console.log("两次密码不一样");
        }
        else {
          //console.log("校验成功");
        }
        return flag;
      }

      //校验手机号
      function checkTelphone(){
        //1.获取手机号的值
        var telphone = document.getElementById("phonenumber").value;
        //2.定义正则表达式
        var reg_telphone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        //3.判断值是否符合正则的规则
        var flag = reg_telphone.test(telphone);
        //4.提示信息
        var s_telphone = document.getElementById("s_telphone");

        if(flag){
          console.log("true");
        }else{
          //提示红色错误信息
          s_telphone.innerHTML = "手机号输入有误";
        }
        return flag;
      }
    </script>
  </head>
  <body style="background: url('img/preview1.jpg');height: 100%;width: 100%;">
  <nav id="menu" class="navbar navbar-default navbar-fixed-top">
    <div class="container">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand page-scroll" href="index.jsp">西安文理学院社团管理系统</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="index.jsp">首页</a></li>
          <li><a href="${pageContext.request.contextPath}/CommunityServlet?method=findCommunityCategory">社团</a></li>
          <li><a href="${pageContext.request.contextPath}/IndexServlet?method=findHonorWall">荣誉墙</a></li>
          <li><a href="${pageContext.request.contextPath}/IndexServlet?method=findHallOfFame">名人堂</a></li>
          <li><a href="${pageContext.request.contextPath}/Report.jsp">匿名投诉</a></li>
          <li><a href="${pageContext.request.contextPath}/loginForm.jsp">登录</a></li>
          <li><a href="${pageContext.request.contextPath}/StudentServlet?method=findFactoryId">注册</a></li>
          <c:if test="${ not empty student}">
            <li><a href="${pageContext.request.contextPath}/person/personInfo.jsp">我的</a></li>
          </c:if>
        </ul>
      </div>
    </div>
  </nav>

  <div style="position: absolute;top: 100px;left: 900px" id="form">

    <div class="header" id="head">
    </div>
    <div class="wrap" id="wrap">
      <div class="logGet">
        <!-- 头部提示信息 -->
        <div class="logD logDtip">
          <p class="p1" id="tips">欢迎注册！</p>
        </div>
        <div class="alert alert-warning alert-dismissible" role="alert">
          <span>欢迎注册新用户！</span>
        </div>
        <!-- 输入框 -->
          <form method="post" action="StudentServlet?method=regiStudent">
        <div class="lgD">
          <input type="text" name="sno" id="sno"
                 placeholder="输入学号" />
          <span id="s_sno" class="error"></span>
        </div>
         <div class="lgD">
              <input type="text" name="username" id="username"
                     placeholder="输入姓名" />
         </div>
        <div class="lgD">
          <input type="password" name="password" id="password"
                 placeholder="输入用户密码" />
          <span id="s_password" class="error"></span>
        </div>
        <div class="lgD">
          <input type="password"  name="password2" id="password2"
                 placeholder="确认输入用户密码" />
          <span id="s_password2" class="repeat"></span>
        </div>

        <div class="lgD">
          <input type="text" name="phonenumber" id="phonenumber"  maxlength="11"
                 placeholder="手机号码" />
          <span id="s_telphone" class="error"></span>
        </div>
        <div style="margin-left: 50px">
          <label for="Birthday" style="font-size: 15px"><strong>出生日期</strong></label>
          <input style="margin-left: 20px" type="date" name="birthday" id="Birthday">
        </div>
        <label style="font-size: 15px;position: absolute;left: 50px;"><strong>性别</strong></label>
        <div style="position: absolute;right: 200px">
        <label><input type="radio" name="gender" value="男" checked="checked"> 男</label>
        <label><input type="radio" name="gender" value="女">女</label>
        </div>
        <br />
        <div class="logD" style="padding-left: 50px">
          <p><strong>请选择学院：</strong></p>
          <select name="sfaculty">
                  <c:forEach items="${faulties}" var="n">
                      <option value="${n.fid}">${n.fname}</option>
                  </c:forEach>
              </select>
          </div>
        <div class="lgD">
          <img alt="验证码" id="imagecode" src="<%=request.getContextPath()%>/RandomCodeServlet"/><br/>
          <a href="javascript:ReloadCode();" style="margin-left: 120px">看不清楚，换一张</a>
          <input type="text" style="margin-top: 20px" placeholder="输入验证码" name="yzm"/>
        </div>
        <div class="logC" style="padding-top: 20px">
          <a  href="ReginForm.jsp" type="submit"><button type="submit" id="btn_sub">注 册</button></a>
        </div>
          </form>
      </div>
    </div>
  </div>
  </div>
  </body>
</html>
